<template>
  <button @click="flag = !flag">切换</button>
  <!-- appear(必须添加该属性) 通过这个属性可以设置初始节点过度 就是页面加载完成就开始动画 对应三个状态 -->
  <transition
    name="basic"
    appear
    appear-from-class="basic-enter-from "
    appear-active-class="basic-enter-active"
    appear-to-class="basic-enter-to"
  >
    <div class="spare" v-if="flag"></div>
  </transition>
  <div class="sk-spare"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const flag = ref<boolean>(true);
</script>

<style lang="scss" scoped>
.spare {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgb(45, 238, 161);
}

.sk-spare {
  width: 200px;
  height: 200px;
  background-color: transparent;
}

// 开始动画
.basic-enter-from {
  width: 0;
  height: 0;
  background-color: rgb(36, 34, 37);
}
// 动画过程中
.basic-enter-active {
  transition: all 0.5s linear;
}
// 动画完成
.basic-enter-to {
  width: 200px;
  height: 200px;
  background-color: rgb(45, 238, 161);
  transform: rotate(360deg);
}

//离开过度
.basic-leave-from {
  width: 200px;
  height: 200px;
  background-color: rgb(45, 238, 161);
}
//离开中过度
.basic-leave-active {
  transition: all 3s linear;
}
//离开完成
.basic-leave-to {
  width: 0px;
  height: 0px;
  transform: rotate(360deg);
}
</style>
